<template>
  <div class="platSet" v-loading="loading">
    <el-tabs type="border-card" v-permission="['platform@index']">
      <el-tab-pane
        v-for="(parent, parentKey) in ListData"
        :label="parent.tab_name"
        :key="parentKey"
      >
        <el-tabs :tab-position="'left'" class="tablistChildren">
          <el-tab-pane
            :label="chindren.tab_name"
            v-for="(chindren, chindrenKey) in parent.list"
            :key="chindrenKey"
          >
            <el-form
              el-form
              :ref="'form_' + chindrenKey"
              label-width="120px"
              class="formList"
              :model="chindren"
            >
              <div
                v-for="(chindren3, chindrenKey3) in chindren.list"
                :key="chindrenKey3"
                :class="chindren3.type == 'image' ? 'w50' : ''"
              >
                <div v-if="chindren3.type == 'string'">
                  <text-tag
                    :value.sync="chindren3.value"
                    :propValue="'list.' + chindrenKey3 + '.value'"
                    :labelRuleValue="chindren3"
                    :disabledValue="ListShow[chindrenKey]"
                  ></text-tag>
                </div>
                <div v-if="chindren3.type == 'textarea'">
                  <text-tag
                    :value.sync="chindren3.value"
                    :propValue="'list.' + chindrenKey3 + '.value'"
                    :labelRuleValue="chindren3"
                    :disabledValue="ListShow[chindrenKey]"
                    :inputType="'textarea'"
                  ></text-tag>
                </div>
                <div v-if="chindren3.type == 'password'">
                  <text-tag
                    :value.sync="chindren3.value"
                    :propValue="'list.' + chindrenKey3 + '.value'"
                    :labelRuleValue="chindren3"
                    :disabledValue="ListShow[chindrenKey]"
                    :showPass="true"
                  ></text-tag>
                </div>
                <div v-if="chindren3.type == 'select'">
                  <select-tag
                    :value.sync="chindren3.value"
                    :propValue="'list.' + chindrenKey3 + '.value'"
                    :labelRuleValue="chindren3"
                    :disabledValue="ListShow[chindrenKey]"
                  ></select-tag>
                </div>
                <div v-if="chindren3.type == 'image'">
                  <upload-tag
                    :value.sync="chindren3.value"
                    :propValue="'list.' + chindrenKey3 + '.value'"
                    :labelRuleValue="chindren3"
                    :disabledValue="ListShow[chindrenKey]"
                    :FormName="chindrenKey"
                    @getFileVail="getFileVail"
                  ></upload-tag>
                </div>
                <div v-if="chindren3.type == 'upload'">
                  <form-file
                    :value.sync="chindren3.value"
                    :hrefTitle.sync="chindren3.special"
                    :propValue="'list.' + chindrenKey3 + '.value'"
                    :labelRuleValue="chindren3"
                    :disabledValue="ListShow[chindrenKey]"
                    :uploadType="'.XLSX,.XLS'"
                    :FormName="chindrenKey"
                    @getFileVail="getFileVail"
                  ></form-file>
                </div>
                <div v-if="chindren3.type == 'array'">
                  <form-array
                    :value.sync="chindren3.value"
                    :hrefTitle.sync="chindren3.special"
                    :labelRuleValue="chindren3"
                    :disabledValue="ListShow[chindrenKey]"
                  ></form-array>
                </div>
                <div v-if="chindren3.type == 'tip'" class="tipsText">
                  {{ chindren3.title }}{{ chindren3.value }}
                </div>
              </div>
              <div class="footer" v-permission="['platform@save']">
                <el-button
                  type="primary"
                  @click="submitItem(chindrenKey, chindren)"
                  class="buttonEdit"
                  >{{
                    ListShow[chindrenKey]
                      ? $t("common.common20")
                      : $t("common.common2")
                  }}</el-button
                >
                <!-- "编辑" : "确定" -->
                <el-button
                  type="info"
                  v-show="!ListShow[chindrenKey]"
                  @click="cancel(chindrenKey)"
                  >{{ $t("common.common1") }}</el-button
                >
                <!-- 取消 -->
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import SelectTag from "@/components/typeTag/SelectTag";
import TextTag from "@/components/typeTag/TextTag";
import UploadTag from "@/components/typeTag/UploadTag";
import VideoTag from "@/components/typeTag/VideoTag";
import FormFile from "@/components/typeTag/FormFile";
import FormArray from "@/components/typeTag/FormArray";
import { getCusList, UpdateSet } from "@/api/platform/platform";
export default {
  components: {
    SelectTag,
    TextTag,
    UploadTag,
    VideoTag,
    FormFile,
    FormArray,
  },
  data() {
    return {
      loading: false,
      ListShow: {},
      ListData: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getCusList()
        .then((res) => {
          if (res.code == 10000) {
            this.ListData = res.data;
            for (var key in this.ListData) {
              for (var chindrenKeys in this.ListData[key].list) {
                this.$set(this.ListShow, chindrenKeys, true);
              }
            }
            this.loading = false;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    submitItem(chindrenKey, list) {
      if (this.ListShow[chindrenKey]) {
        this.ListShow[chindrenKey] = !this.ListShow[chindrenKey];
      } else {
        // console.log(list, "list");
        this.UpdateSet(list, chindrenKey);
      }
    },
    UpdateSet(list, chindrenKey) {
      let vm = this,
        type = "warning";
      vm.$refs["form_" + chindrenKey][0].validate((valid) => {
        if (valid) {
          // "保存后立即生效, 是否继续", "保存",
          vm.$confirm(this.$t("common.common30"), this.$t("common.common31"), {
            type: "warning",
            closeOnClickModal: false,
          })
            .then((_) => {
              UpdateSet(list)
                .then((res) => {
                  if (res.code == 10000) {
                    type = "success";
                    vm.getList();
                  }
                  vm.$message({
                    showClose: true,
                    message: res.message,
                    type: type,
                  });
                })
                .catch((error) => {
                  vm.$message.error(error.Error);
                });
            })
            .catch((_) => {
              // this.$emit("modalcancel", "modalCardAddshow");
            });
        }
      });
    },
    cancel(chindrenKey) {
      this.$refs["form_" + chindrenKey][0].resetFields();
      this.getList();
    },
    getFileVail(formField, FormName) {
      this.$refs[FormName].validateField([formField], (valid) => {});
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.formList {
  padding-right: 15%;
}
.w50 {
  width: 50%;
  display: inline-block;
}
.tipsText {
  font-size: 14px;
  color: #606266;
  margin-left: 80px;
  margin-bottom: 20px;
}
</style>